<!--右边的按钮，点击弹出窗口 -->
<template>
  <div class="side-right-btn" :style="{right:btnRight,top:btnTop}" @click="closeLeftBox">
    <Icon v-if="display==true" type="ios-arrow-forward" />
    <Icon v-if="display==false" type="ios-arrow-back" />
  </div>
</template>
<script>
export default {
  props:{
    boxHeight:{  //盒子高度
      type: String,
      default:'0px'
    },
    boxWidth: { //盒子宽度
      type: String,
      default: '0px'
    },
    display:{
      type: Boolean,
      default: false
    }
  },
  watch:{
    boxWidth(){
      /** 计算BOX 的height 来计算 按键应该在 box的中间位置 */
      let leng=this.boxHeight.length;
      if (this.boxHeight.substring(leng-1,leng)=="x"){
        this.btnTop = this.boxHeight.substring(0,leng-2) * 0.5 + "px";
      }else if (this.boxWidth.substring(leng-1,leng)=="%"){
        this.btnTop = this.boxHeight.substring(0,leng-1) * 0.5 + "%";
      }
    },
    display(){
      if (this.display==true){
        this.btnRight=this.boxWidth;
      }else{
        this.btnRight='0px';
      }
    }
  },
  data(){
    return{
      btnTop: "50%",
      btnRight: '0px',
      icon: 'ios-arrow-back',
    }
  },
  methods:{
    closeLeftBox() {
      /** 关闭 */
      //this.display = !this.display;
/*      if (this.display==true){
        this.btnRight= this.boxWidth;
      }else{
        this.btnRight=0;
      }*/
      this.$emit('click', !this.display);
    }
  },
  mounted() {}
}
</script>
<style lang="less" scoped>
/*side-right-btn*/
.side-right-btn {
  //display: -webkit-box;
  //display: -ms-flexbox;
  display: flex;
  //-webkit-box-orient: horizontal;
  //-webkit-box-direction: normal;
  flex-flow: column;
  justify-content: center;
  position: absolute;
  //left: 0;
  right: 0;
  top: 50%;
  width: 25px;
  padding: 0 10px;
  height: 60px;
  //-webkit-transform: translateX(-50%);
  transform: translateY(-50%);
  background-color: rgba(5, 31, 112, 1);
  z-index: 10;
  cursor: pointer;
  color: #ffffff;

  /*  opacity: 1;
    transition: opacity 0.5s;*/
}
.side-right-btn::before {
  top: -70px;
  border-bottom-color: rgba(5, 31, 112, 1) !important;
  border-bottom-width: 45px !important;
}
.side-right-btn::after {
  bottom: -70px;
  border-top-color: rgba(5, 31, 112, 1) !important;
  border-top-width: 45px !important;
}
.side-right-btn::before, .side-right-btn::after {
  display: block;
  content: '';
  width: 0;
  height: 0;
  border: 25px solid transparent;
  position: absolute;
  //left: -25px;
  right: -25px;
  pointer-events: none;
  box-sizing: border-box;
}
/**:before, *:after {
  //-webkit-box-sizing: border-box !important;
  box-sizing: border-box;
}*/
</style>
